<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500"></canvas>
    <!-- 顶点着色器 -->
    <script id="vertex-shader" type="x-shader/x-vertex">
      //vec2 pos = vec2(0.5, 0.5); // 位置坐标
      attribute vec2 aPos; // 位置坐标
      attribute vec2 aPos1; // 位置坐标1
      void main() {
        vec2 newPos = aPos + aPos1; // 计算新的位置坐标
          gl_Position = vec4(newPos, 0.0, 1.0);
          gl_PointSize = 10.0;
      }
    </script>

    <!-- 片元着色器 -->
    <script id="fragment-shader" type="x-shader/x-fragment">
      void main() {
          gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
      }
    </script>
    <script>
      const canvas = document.getElementById("canvas");
      const gl = canvas.getContext("webgl");
      if (!gl) {
        console.error("WebGL not supported");
      }
      // 创建顶点着色器和片元着色器
      const vertexShader = gl.createShader(gl.VERTEX_SHADER);
      const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

      //获取着色器代码
      const vertexSource = document.getElementById("vertex-shader").textContent;
      const fragmentSource =
        document.getElementById("fragment-shader").textContent;

      // 绑定着色器源码
      gl.shaderSource(vertexShader, vertexSource);
      gl.shaderSource(fragmentShader, fragmentSource);

      // 编译着色器
      gl.compileShader(vertexShader);
      gl.compileShader(fragmentShader);

      // 创建程序对象
      const program = gl.createProgram();
      // 将顶点着色器和片元着色器关联到程序对象
      gl.attachShader(program, vertexShader);
      gl.attachShader(program, fragmentShader);
      // 链接程序对象
      gl.linkProgram(program);
      // 使用程序对象
      gl.useProgram(program);

      const posLocation = gl.getAttribLocation(program, "aPos"); // 获取属性变量aPos的位置
      const posLocation1 = gl.getAttribLocation(program, "aPos1"); // 获取属性变量aPos1的位置
      console.log(posLocation, posLocation1);
      const offset = [0.5, 0.5];
      const offset1 = [-0.1, -0.2];
      // 设置顶点属性的数据。动态传递数据
      gl.vertexAttrib2f(posLocation, ...offset); // 设置顶点属性的值
      gl.vertexAttrib2f(posLocation1, ...offset1); // 设置顶点属性的值
      // 绘制一个点
      gl.drawArrays(gl.POINTS, 0, 1); // 在中心位置绘制一个点
    </script>
  </body>
</html>
